<style lang="less">
    .chart-con {
        height: 200px;
    }

    .chart-con-300 {
        height: 300px;
    }

</style>

<template>
    <div>
        {{$data}}
        <Row class="margin-top-10 ">

            <Col span="6">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    饼图 vechart-pie.vue
                </p>
                <div class="chart-con">
                    <vechart_pie id="chart1" :chartData="pieData"></vechart_pie>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    环形图 vechart-ring.vue
                </p>
                <div class="chart-con">
                    <vechart_ring id="chart2" :chartData="ringData"></vechart_ring>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    折线图 vechart-line.vue
                </p>
                <div class="chart-con">
                    <vechart_line id="chart3" :chartData="lineData"></vechart_line>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    柱状图水平 vechart-bar-hor.vue
                </p>
                <div class="chart-con">
                    <vechart_bar_hor id="chart5" :chartData="barHorData"></vechart_bar_hor>
                </div>
            </Card>
            </Col>

        </Row>

        <Row class="margin-top-10 ">
            <Col span="12">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    折线和柱状图 vechart-line-bar.vue
                </p>
                <div class="chart-con-300">
                    <vechart_line_bar id="chart4" :chartData="lineBarData"></vechart_line_bar>
                </div>
            </Card>
            </Col>
            <Col span="12">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    关系图 vechart-line-relation.vue
                </p>
                <div class="chart-con-300">
                    <vechart_line_relation id="chart6" :chartData="lineRelationData"></vechart_line_relation>
                </div>
            </Card>
            </Col>
        </Row>
    </div>


</template>

<script>
    import vechart_pie from './component/vechart-pie.vue'
    import vechart_ring from './component/vechart-ring.vue'
    import vechart_line from './component/vechart-line.vue'
    import vechart_line_bar from './component/vechart-line-bar.vue'
    import vechart_bar_hor from './component/vechart-bar-hor.vue'
    import vechart_line_relation from './component/vechart-line-relation.vue'

    export default {
        name: "demo",
        components: {
            vechart_pie,
            vechart_ring,
            vechart_line,
            vechart_line_bar,
            vechart_bar_hor,
            vechart_line_relation,
        },
        data() {
            return {
                pieData: {
                    name: '访问来源',
                    data: [
                        {value: 2103456, name: '数据1'},
                        {value: 1305923, name: '数据2'},
                        {value: 543250, name: '数据3'},
                        {value: 798403, name: '数据4'}
                    ]
                },
                ringData: {
                    name: '访问来源',
                    data: [
                        {value: 2156, name: '数据1'},
                        {value: 13923, name: '数据2'},
                        {value: 5430, name: '数据3'},
                        {value: 793, name: '数据4'}
                    ]
                },
                lineData: {
                    name: "名称",
                    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                barHorData: {
                    name: "2013年",
                    yAxis: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
                    data: [19325, 23438, 31000, 121594, 134141, 681807]
                },
                lineBarData: {
                    leftname: "降水量",
                    rrghtname: "平均温度",
                    data: [
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        },
                        {
                            name: '平均温度',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                },
                lineRelationData: {
                    bottomname: "下方数据名称",
                    topname: "上方数据名称",
                    xAxis: ['2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00'],
                    bottomData: [1, 2, 4, 2, 3],//下方数据
                    topData: [2, 1, 3, 4, 1]//上方数据
                }

            }
        },
        mounted() {
            var _this = this;
            setTimeout(function () {
                // 修改数据,自动更新图表
                _this.pieData.data[0].value = 1103456;
            }, 2000);
        }

    };
</script>

<style>

</style>
